<script setup lang="ts">
  import { computed, PropType, ref, watch } from 'vue'
  import {
    ComponentListItem,
    CustomFormTemplate,
    DataConnectTable,
    CustomFormFieldVal,
  } from '../../hooks/types'
  import CustomInput from '@/views/order/custom/form/component-list/CustomInput.vue'
  import CustomRadio from '@/views/order/custom/form/component-list/CustomRadio.vue'
  import CustomCheckbox from '@/views/order/custom/form/component-list/CustomCheckbox.vue'
  import CustomTextarea from '@/views/order/custom/form/component-list/CustomTextarea.vue'
  import CustomSingleSelect from '@/views/order/custom/form/component-list/CustomSingleSelect.vue'
  import CustomMultipleSelect from '@/views/order/custom/form/component-list/CustomMultipleSelect.vue'
  import CustomDivider from '@/views/order/custom/form/component-list/CustomDivider.vue'
  import CustomDateTime from '@/views/order/custom/form/component-list/CustomDateTime.vue'
  import CustomFileUpload from '@/views/order/custom/form/component-list/CustomFileUpload.vue'
  import CustomAddress from '@/views/order/custom/form/component-list/CustomAddress.vue'
  import CustomDataConnect from '@/views/order/custom/form/component-list/custom-data-connect/Index.vue'
  import CustomChildForm from '@/views/order/custom/form/component-list/CustomChildForm.vue'

  defineOptions({
    name: 'CustomFormPreviewModal',
  })

  const props = defineProps({
    template: {
      type: Object as PropType<CustomFormTemplate>,
      default: () => {
        return {
          id: '',
          name: '',
          status: false,
          createTime: '',
          updateTime: '',
          numberColumnOfEachRow: 4,
          componentList: [],
        }
      },
    },
  })

  // 抽屉显示状态
  const visible = defineModel('modelValue', { type: Boolean, default: false })

  // 表单
  const form = ref<Record<string, CustomFormFieldVal>>({})

  /**
   * 组件宽度列表
   */
  const componentWidthList = computed(() => {
    return props.template.componentList.map((component) => {
      if (component.width === '1') {
        return '100%'
      }

      if (component.width === '1/2') {
        return '50%'
      }

      if (component.width === '1/3') {
        return '33.33%'
      }

      if (component.width === '1/4') {
        return '25%'
      }
    })
  })

  /**
   * 表单关联数据选择事件
   * @param {ComponentListItem} component - 组件对象
   * @param {DataConnectTable} selectData - 选择的数据
   */
  const handleFormCustomDataConnectChange = (
    component: ComponentListItem,
    selectData: DataConnectTable,
  ) => {
    component.dataConnectConfig.fillRules.forEach((item) => {
      const data = selectData[0]
      if (data && form.value[item.toFieldNo] && item.fillMode === 2) {
        form.value[item.toFieldNo].inputVal = data[item.fromField]
      }
    })
  }

  watch(visible, (value) => {
    if (value) {
      props.template.componentList.forEach((component) => {
        form.value[String(component.no)] = {
          inputVal: '',
          textareaVal: '',
          radioVal: '',
          checkboxVal: [],
          singleSelectVal: '',
          multipleSelectVal: [],
          datetimeVal: {
            date: '',
            dateTime: '',
            time: '',
            timeRange: {
              date: '',
              startTime: '',
              endTime: '',
            },
          },
          dataConnectVal: '',
          fileUploadVal: [],
          addressVal: {
            province: '',
            city: '',
            area: '',
            town: '',
            address: '',
          },
          childFormVal: [],
        }
      })
    }
  })
</script>

<template>
  <div>
    <h-drawer v-model="visible" title="模板预览" :width="90">
      <div class="container">
        <div
          v-for="(component, componentIndex) in props.template.componentList"
          :key="componentIndex"
          class="field"
          :style="{
            width: component.type === 'divider' ? '100%' : componentWidthList[componentIndex],
          }"
        >
          <!--分割线-->
          <custom-divider
            v-if="component.type === 'divider'"
            :divider-color="component.dividerConfig.dividerColor"
            :desc="component.dividerConfig.desc"
            :style="component.dividerConfig.style"
            :title="component.dividerConfig.title"
            :title-color="component.dividerConfig.titleColor"
          />
          <template v-else>
            <div class="header">
              <div v-if="component.required" class="required">*</div>
              <div class="label">{{ component.label }}</div>
            </div>

            <!--单行输入-->
            <custom-input
              v-if="component.type === 'input'"
              v-model="form[String(component.no)].inputVal"
              :amount-max="component.inputConfig.amountMax"
              :maxlength="component.inputConfig.maxLength"
              :mode="component.inputConfig.mode"
              :number-max="component.inputConfig.numberMax"
              :placeholder="component.inputConfig.placeholder"
            />

            <!--多行输入-->
            <custom-textarea
              v-if="component.type === 'textarea'"
              v-model="form[String(component.no)].textareaVal"
              :maxlength="component.textareaConfig.maxLength"
              :placeholder="component.textareaConfig.placeholder"
            />

            <!--单选框-->
            <custom-radio
              v-if="component.type === 'radio'"
              v-model="form[String(component.no)].radioVal"
              :options="component.radioConfig.options"
            />

            <!--多选框-->
            <custom-checkbox
              v-if="component.type === 'checkbox'"
              v-model="form[String(component.no)].checkboxVal"
              :options="component.checkboxConfig.options"
            />

            <!--下拉单选-->
            <custom-single-select
              v-if="component.type === 'single-select'"
              v-model="form[String(component.no)].singleSelectVal"
              :placeholder="component.singleSelectConfig.placeholder"
              :options="component.singleSelectConfig.options"
            />

            <!--下拉多选-->
            <custom-multiple-select
              v-if="component.type === 'multiple-select'"
              v-model="form[String(component.no)].multipleSelectVal"
              :placeholder="component.multipleSelectConfig.placeholder"
              :options="component.multipleSelectConfig.options"
            />

            <!--日期时间-->
            <custom-date-time
              v-if="component.type === 'date-time'"
              v-model="form[String(component.no)].datetimeVal"
              :placeholder="component.dateTimeConfig.placeholder"
              :datetime-type="component.dateTimeConfig.dateTimeType"
            />

            <!--文件上传-->
            <custom-file-upload
              v-if="component.type === 'file-upload'"
              v-model="form[String(component.no)].fileUploadVal"
              :num="component.fileUploadConfig.num"
              :size="component.fileUploadConfig.size"
              :upload-type="component.fileUploadConfig.type"
            />

            <!--地址选择-->
            <custom-address
              v-if="component.type === 'address'"
              v-model="form[String(component.no)].addressVal"
            />

            <!--关联数据-->
            <custom-data-connect
              v-if="component.type === 'data-connect'"
              :data-type="component.dataConnectConfig.type"
              :field-list="component.dataConnectConfig.fieldList"
              :select-mode="2"
              :field-show-list-after-select="component.dataConnectConfig.showFormFieldList"
              @change="(list: DataConnectTable) => handleFormCustomDataConnectChange(component, list)"
            />

            <!--子表单-->
            <custom-child-form
              v-if="component.type === 'child-form'"
              :field-list="component.childFormConfig"
            />
          </template>
        </div>
      </div>
      <template #footer>
        <h-button type="primary" is-modal>确定</h-button>
      </template>
    </h-drawer>
  </div>
</template>

<style scoped lang="scss">
  .container {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    //gap: 12px;

    .field {
      height: fit-content;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 12px;

      .header {
        display: flex;
        align-items: center;
        column-gap: 4px;

        .required {
          color: #f56767;
        }

        .label {
          height: 24px;
          line-height: 24px;
        }
      }
    }
  }
</style>
